<template>
	<view class="cu-item shadow">
		<view class="image">
			<image :src="formatImg(cardInfo.picture)"
			mode="widthFix"></image>
		<!-- <view class="cu-tag bg-blue">史诗</view> -->
		<!-- <view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view> -->
		</view>
		<view class="cu-list menu-avatar">
		<view class="cu-item">
			<view class="flex-sub">
				<view class="project-title">{{ cardInfo.project_name }}</view
				>
				<view class="company">出品方：{{ cardInfo.company_name }}</view>
				 <view class="hry-timer" v-if="cardInfo.status === 2">
				        {{ formatTimer() }}
				      </view>
			</view>
			<view class="status" :class="cardInfo.status === 1? 'text-red': cardInfo.status === 2? 'text-orange':''" >
				{{formatStatus(cardInfo.status)}}
			</view>
		</view>
	</view>
	</view>
</template>

<script>
import moment from "moment";
export default {
  name: "index",
  props: {
    cardInfo: {
      type: Object
    }
  },
  data() {
	  let that = this;
    return {
      timer: null,
      endTime: null,
      nowDate: "",
	  imgUrl: that.$mConfig.assetsPath,
    };
  },
  methods: {
    moment,
	formatStatusClass(status) {
	  switch (status) {
	    case 1:
	      return "text-ready";
	    case 2:
	      return "hry-current";
	    case 3:
	      return "hry-success";
	    case 4:
	      return "hry-success";
	    case 5:
	      return "hry-success";
	    case 6:
	      return "hry-success";
	  }
	},
    formatImg(thumb) {
          if (thumb.indexOf("http") !== -1) {
            return thumb;
          } else {
            return this.imgUrl + thumb;
          }
        },
    formatTimer() {
      if (this.endTime) {
        this.nowDate = this.moment().unix();
        if (this.nowDate < this.endTime) {
          let mixinTime = this.endTime - this.nowDate;
          var dd = Math.floor(mixinTime / 60 / 60 / 24);
          var hh = Math.floor((mixinTime / 60 / 60) % 24);
          var mm = Math.floor((mixinTime / 60) % 60);
          var ss = Math.floor(mixinTime % 60);
          return "剩余时间：" + dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
        } else {
          return "";
        }
      } else {
        return "";
      }
    },
    formatStatus(status) {
           switch (status) {
              case 1:
                return "预热中";
              case 2:
                return "认投中";
              case 3:
                return "已成功";
              case 4:
                return "已成功";
              case 5:
                return "已成功";
              case 6:
                return "已成功";
            }
        },
  },
  watch: {
    cardInfo: {
      handler(val) {
        if (val) {
          if (val.status === 2) {
            this.endTime = JSON.parse(JSON.stringify(val.end_time));
            if (this.timer) {
              clearInterval(this.timer);
            }
            this.timer = setInterval(() => {
              this.formatTimer();
            }, 1000);
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style lang="scss" scoped>
	.project-title{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(50,50,50,1);
	}
	.company{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(176,176,176,1);
		line-height: 54rpx;
	}
	.hry-timer{
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(176,176,176,1);
	}
	.status{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
	}
	.image image{
		border-radius: 12rpx;
	}
</style>
